<template>
  <div style="width:100%;display:flex;flex-wrap:wrap">
    <div
      v-for="(dateItem,index) in innerData"
      :key="index"
      style="width:31%;margin-bottom:1rem;margin-left:-1%"
    >
      <div class="recruitTabBox" style="width:92%;margin:0 auto">
        <!-- 卡片的样式 start -->
        <div>
          <div
            style="justify-content: space-between;margin-top:2.25rem"
            class="recruitTabBox-flex-base recruitTabBox-width"
          >
            <p>{{dateItem.position}}</p>
            <p style="color:#3EADFF">{{dateItem.salary}}</p>
          </div>
          <div style="margin-top:0.81rem" class="recruitTabBox-flex-base recruitTabBox-width">
            <div class="recruitTabBox-flex-base">
              <img
                style="width:1.125rem;height:1.125rem"
                src="@/assets/recruit/recruit-experience.png"
                alt="招聘的经验图片"
              />
              <p>{{dateItem.experience}}</p>
            </div>
            <div class="recruitTabBox-flex-base" style="margin-left:2rem">
              <img
                style="width:1.5rem;height:1.125rem"
                src="@/assets/recruit/recruit-education.png"
                alt="招聘的学历图片"
              />
              <p>{{dateItem.education}}</p>
            </div>
          </div>
          <p
            class="recruitTabBox-flex-base recruitTabBox-width"
            style="margin-top:2rem;height: 30px"
          >技能要求：{{dateItem.skillRequirement}}</p>
        </div>
        <!-- 卡片的样式 end -->

        <!-- 详细内容的盒子 -->
        <div :ref="'dataContentBox'+index" class="recruitTabBox-content-hide">
          <div class="recruitTabBox-width" style="padding-top:3.125rem">
            <p>
              职位基本信息：
              <br/>
              1、工作城市：{{dateItem.city}}
              <br/>
              2、工作地点：{{dateItem.adress}}
            </p>
          </div>
          <div class="recruitTabBox-width" style="margin-top:2.1875rem;padding-bottom:2.68rem">
            <p>岗位职责:</p>


            <div style="white-space: pre-wrap">{{dateItem.arrayp}}
            </div>


          </div>
        </div>
        <!-- 详细内容的盒子end -->

        <!-- 向下按钮 -->
        <div :ref="'dataContentBoxdown'+index">
          <div class="recruitTabBox-flex-base recruitTabBox-down" style="background-color:#fff">
            <img @click="down(index)" src="@/assets/recruit/recruit-down.png" alt="向下图标"/>
          </div>
        </div>
        <!-- 向上按钮 -->
        <div :ref="'dataContentBoxup'+index" class="recruitTabBox-content-hide">
          <div class="recruitTabBox-flex-base recruitTabBox-down" style="background-color:#fff;">
            <img
              @click="up(index)"
              src="@/assets/recruit/recruit-down.png"
              alt="向上图标"
              style="transform: rotate(180deg);"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import recruitTabBoxP from "./recruitTabBoxP";
  import axios from 'axios';

  export default {
    // 接受父组件的值
    props: {
      data: {
        type: Array,
        default() {
          return [];
        },
      },
    },
    data() {
      return {
        innerData: [],
        showOrHide: true
      };
    },
    computed: {
      changeNum () {
        return this.$store.state.changeNum;　　//需要监听的数据
      }
    },

    //处于发起后端请求，获取数据，配合路由钩子执行操作（DOM渲染完成，组件挂载完成 ）
    mounted() {
      console.log(this.innerData);

      this.getRecruiter()
    },
    components: {
      recruitTabBoxP
    },
    watch:{
      changeNum (newVal, oldVal) {
          console.log(newVal,'新数据')
          this.getRecruiter()
        }
    },
    methods: {
      down: function (index) {
        this.$refs["dataContentBoxdown" + index][0].className =
          "recruitTabBox-content-hide";
        this.$refs["dataContentBoxup" + index][0].className =
          "recruitTabBox-content-show";
        this.$refs["dataContentBox" + index][0].className =
          "recruitTabBox-content-show";
        console.log(
          "这里有一串神秘的数字[3543]。但是不知道有什么用，也许记下来会有用！"
        );
      },
      up: function (index) {
        this.$refs["dataContentBoxdown" + index][0].className =
          "recruitTabBox-content-show";
        this.$refs["dataContentBoxup" + index][0].className =
          "recruitTabBox-content-hide";
        this.$refs["dataContentBox" + index][0].className =
          "recruitTabBox-content-hide";
      },

      //通过get方法从后端的数据接口获取数据（这里是获取招聘页面的招聘职位等数据）
      getRecruiter() {
        let param = new FormData();
        if (this.type === undefined){
          this.type = 0;
        }
        param.append("type",this.changeNum)
        console.log(param)
        //=>表示可以渲染模板数据
        axios.post('api/vue/getAll',param).then((res) => {
          console.log(res); //请求正确时执行的代码
          this.innerData = res.data;
          console.log(this.innerData)
        }).catch(function (response) {
          console.log(response); //发生错误时执行的代码
        });
      }
    }
  };
</script>
<style>
  .recruitTabBox {
    border: 1px solid #f5f4f4d3;
    box-shadow: 0px 7px 21px 0px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    margin-bottom: 1rem;
  }

  .recruitTabBox:hover {
    box-shadow: 0px 7px 21px 0px rgba(0, 0, 0, 0.23);
  }

  .recruitTabBox-flex-base {
    display: flex;
  }

  .text-wrapper {
    white-space: pre-wrap;
  }

  .recruitTabBox-width {
    width: 88%;
    margin: 0 auto;
  }

  .recruitTabBox-down {
    background-color: #fff;
    justify-content: center;
    align-items: center;
    padding-top: 0.375rem;
  }

  .recruitTabBox-down img {
    width: 0.94rem;
    height: 0.562rem;
    padding: 1rem;
    cursor: pointer;
  }

  .recruitTabBox-content-hide {
    display: none;
  }

  .recruitTabBox-content-show {
    display: block;
  }
</style>
